*{

    margin: 0;
    padding: 0;
}

.middle>div:nth-child(1){
    width: 100%;
    background-color: #ECECEC;
    display: flex;
    justify-content: center;
}
.middle>div:nth-child(1)>div{
    background-color: white;
    border-radius: 4px;
    margin: 15px;
    display: flex;
    width: 9em;
    justify-content: center;
    align-items: center;
    padding: 5px 0 5px 0;
}
.middle>div:nth-child(1)>div:hover{
    background-color: white;
    cursor: pointer;
    background-color: rgb(166,139,95);
    color: white;
}


.middle>div:nth-child(2)>div{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}
.middle>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1){
    height: 285px;
    width: 285px;
    background-image: url("../img/f4.jpg");
    background-size: 285px 285px;

}
.middle>div:nth-child(2)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1){
    height: 285px;
    width: 285px;
    background-image: url("../img/gj.jpg");
    background-size: cover;

}
.middle>div:nth-child(2)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1){
    height: 285px;
    width: 285px;
    background-image: url("../img/cq.jpg");
    background-size: 285px 285px;

}
.middle>div:nth-child(2)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1){
    height: 285px;
    width: 285px;
    background-image: url("../img/af.jpg");
    background-size: 285px 285px;

}
.middle>div:nth-child(2)>div:nth-child(2)>div:nth-child(2)>div:nth-child(1){
    height: 285px;
    width: 285px;
    background-image: url("../img/f1.jpg");
    background-size: 285px 285px;

}
.middle>div:nth-child(2)>div:nth-child(2)>div:nth-child(3)>div:nth-child(1){
    height: 285px;
    width: 285px;
    background-image: url("../img/f2.jpg");
    background-size: 285px 285px;

}
.middle>div:nth-child(2)>div:nth-child(2)>div>div:nth-child(1):hover{
    background-size: 350px 350px;
}
.middle>div:nth-child(2)>div:nth-child(1)>div>div:nth-child(1):hover{
    background-size: 350px 350px;
}
/*图片同一边距*/
.middle>div:nth-child(2)>div>div>div:nth-child(1){
    margin: 10px 25px 10px 25px;

}
.middle>div:nth-child(2)>div>div>div:nth-child(1):hover{
    cursor:pointer;

}

 .middle>div:nth-child(2)>div>div>div:nth-child(2){
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 10px 0 0 0;
     width: 100%;
 }
.middle>div:nth-child(2)>div>div>div:nth-child(2)>div:hover{
    color: rgb(166,139,95);
    cursor:pointer;
}
.middle>div:nth-child(3){
    display: flex;
    justify-content: center;
    margin:20px 0 50px 0;
    align-items: center;
}
.middle>div:nth-child(3)>div:nth-child(1){
    border: 1px solid gray;
    border-radius: 2px;
    height: 35px;
    width: 35px;
    margin: 4px;
    background-image: url("../img/left_arrow.png");
    background-color: gray;
    background-size: cover;
}
.middle>div:nth-child(3)>div:nth-child(2){
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #B0E15A;
    border-radius: 2px;
    height: 35px;
    width: 20px;
    background-color: #B0E15A;
    color: white;
}
.middle>div:nth-child(3)>div:nth-child(3){
    border: 1px solid gray;
    border-radius: 2px;
    height: 35px;
    width: 35px;
    margin: 4px;
    background-image: url("../img/right_arrow.png");
    background-color: gray;
    background-size: cover;
}
.middle>div:nth-child(3)>div:hover{
  cursor: pointer;
}